<template>

	<div class="wrap">
		<div class="title">
			<p>添加新地址</p>
		</div>
		<div class="name1">*收货人姓名:<input type="text" name="name" id="name" value="" /></div>
		<p class="diqu">*所在地区:</p>
		<div class="address2">
			<city></city>
			<input type="text" name="qu1" id="qu1" placeholder="区" />
			<img class="bottom-arrow1" src="../../assets/img/sanjiao.png" />
			<img class="bottom-arrow2" src="../../assets/img/sanjiao.png" />
			<img class="bottom-arrow3" src="../../assets/img/sanjiao.png" />
		</div>
		<div class="xiangxi">
			<p>*详细地址:</p>
			<input type="text" name="xiangxi" id="xiangxi1" value="" />
		</div>
		<div class="phone">
			<p class="lianxi">*联系电话:</p>
			<input type="text" name="" id="dianhua" value="" />
			<p class="guding">或固定电话:</p>
			<input type="text" name="guding1" id="guding1" value="" />
			<p class="jian">-</p>
			<input type="text" name="" id="jian1" value="" />
		</div>
		<div class="bottom">
			<input type="checkbox" name="" id="xuanzhong" value="" />
			<p>设置为常用地址</p>
			<router-link to="/address02"><button class="baocun">保存</button></router-link>
		</div>
	</div>

</template>

<script>
	import axios from 'axios'
	import city from 'v-distpicker'
	export default {
		components: {
			city
		},
		methods: {
			apple: function() {

				//三级联动
				$(".address2 select").eq(1).mouseleave(function() {
					if($(".address2 select").eq(1).val() != "市") {
						$("#qu1").css("display", "none");
					};
					$(".address2 select").css("width", "140px");
					$(".address2 select").css("appearance", "none");
				});
				$(".address2 select").eq(0).mouseleave(function() {

					if($(".address2 select").eq(0).val() != "省") {
						$("#qu1").css("display", "block");
					};
					//三级联动样式
					$(".address2 select").css("width", "140px");
					$(".address2 select").css("appearance", "none");
				});
				//三级联动样式
				$(".address2 select").css("width", "140px");
				$(".address2 select").css("appearance", "none");

				//后台
				var params = new URLSearchParams();
				$("#xuanzhong").click(function() {

					if($("#name").val() == "" || $(".address2 select").eq(0).val() == "省" || $(".address2 select").eq(1).val() == "市" || $(".address2 select").eq(2).val() == "区" || $("#xiangxi1").val() == "" || $("#guding1").val() == "" || $("#jian1").val() == "") {
						alert("请正确填写信息！");
						return false;
					};
					var regex = /^[1][3,4,5,7,8][0-9]{9}$/;
					if(regex.test($("#dianhua").val()) == true) {
						
					} else {
						alert("请输入正确的手机号");
					}
					params.append("fun", "0");
					axios.post("/api/vueffPHP/cd.php", params).then(function(res) {
						params.append("phone", res.data.phone);
						params.append("fun", "3");
						//						params.append("id", "dizhi0");
						params.append("name", $("#name").val());

						params.append("dizhi", $(".address2 select").eq(0).val() + " " + $(".address2 select").eq(1).val() + " " + $(".address2 select").eq(2).val());
						params.append("xxdizhi", $("#xiangxi1").val());
						params.append("phone1", $("#dianhua").val());
						params.append("dianhua", $("#guding1").val() + "-" + $("#jian1").val());
						axios.post("/api/vueffPHP/address.php", params).then(function(res) {

						});
					});
				});
			}
		},

		mounted: function() {
			this.apple();
		}

	}
</script>

<style scoped="scoped">
	.wrap {
		width: 1085px;
		height: 625px;
		float: left;
		margin-left: 20px;
		border: 1px solid #e7e7e7;
		margin-bottom: 40px;
		/*display: none;*/
	}
	
	.adddizhi {
		width: 1085px;
		height: 625px;
		float: left;
		margin-left: 20px;
		border: 1px solid #e7e7e7;
		margin-bottom: 40px;
	}
	
	.wrap input {
		text-indent: 0.5em;
	}
	
	.title {
		width: 100%;
		height: 57px;
		border-bottom: 1px solid #E7E7E7;
	}
	
	.title p {
		font-size: 18px;
		margin-left: 21px;
		line-height: 57px;
	}
	
	.name1 {
		font-size: 18px;
		margin-left: 31px;
		margin-top: 47px;
	}
	
	#name {
		margin-left: 10px;
		width: 331px;
		height: 35px;
		border: 1px solid #E7E7E7;
	}
	
	.address2 {
		position: relative;
		margin-left: 145px;
		margin-top: -35px;
	}
	
	#qu1 {
		position: absolute;
		border: 1px solid #DCDCDC;
		width: 138px;
		height: 38px;
		border-radius: 5px;
		top: 0;
		left: 287px;
		text-indent: 0.7em;
	}
	
	.bottom-arrow1 {
		position: absolute;
		left: 120px;
		top: 14px;
	}
	
	.bottom-arrow2 {
		position: absolute;
		left: 262px;
		top: 14px;
	}
	
	.bottom-arrow3 {
		position: absolute;
		left: 407px;
		top: 14px;
	}
	
	.diqu {
		margin-left: 49px;
		font-size: 18px;
		margin-top: 40px;
	}
	
	.xiangxi {
		position: relative;
		font-size: 16px;
	}
	
	.xiangxi p {
		position: absolute;
		font-size: 18px;
		left: 49px;
		top: 35px;
	}
	
	#xiangxi1 {
		position: absolute;
		width: 460px;
		height: 35px;
		border: 1px solid #E7E7E7;
		left: 145px;
		top: 25px;
	}
	
	.phone {
		position: relative;
	}
	
	.lianxi {
		position: absolute;
		font-size: 18px;
		left: 49px;
		top: 100px;
	}
	
	#dianhua {
		position: absolute;
		width: 152px;
		height: 35px;
		border: 1px solid #E7E7E7;
		left: 145px;
		top: 90px;
		font-size: 16px;
	}
	
	.guding {
		position: absolute;
		left: 310px;
		top: 100px;
		font-size: 18px;
	}
	
	#guding1 {
		position: absolute;
		width: 49px;
		height: 35px;
		border: 1px solid #E7E7E7;
		left: 410px;
		font-size: 16px;
		top: 90px;
	}
	
	.jian {
		position: absolute;
		font-size: 20px;
		left: 470px;
		top: 95px;
	}
	
	#jian1 {
		position: absolute;
		width: 125px;
		height: 35px;
		border: 1px solid #E7E7E7;
		left: 490px;
		top: 90px;
		font-size: 16px;
	}
	
	.bottom {
		position: relative;
	}
	
	.bottom p {
		position: absolute;
		font-size: 18px;
		left: 170px;
		top: 152px;
	}
	
	#xuanzhong {
		position: absolute;
		left: 150px;
		top: 160px;
	}
	
	.baocun {
		position: absolute;
		width: 150px;
		height: 50px;
		background: #F08200;
		border-radius: 5px;
		color: white;
		font-size: 16px;
		left: 145px;
		top: 200px;
	}
</style>